<template>
    <div class="limit-box">
        <div class="limit-box_title l-f l-col-start">
            <img class="limit-box_title_icon" src="@/assets/icons/icon-question.svg" alt="">
            <div>
                <p class="limit-box_title_label">{{$t('contract.chooseType')}}</p>
                <p class="limit-box_desc">{{$t('contract.chooseTypeDesc')}}:</p>
            </div>
        </div>
        <div class="limit-box_list">
            <div class="limit-box_list_item l-f" 
            :class="currentIndex === index ? 'limit-box_list_item-active' : ''"
            v-for="(item,index) in listData" 
            :key="index" 
            @click.stop="onSelect(index)">
                <p class="limit-box_list_item_label">{{item}}</p>
                <img v-if="currentIndex === index" class="limit-box_list_item_icon" src="@/assets/icons/icon-limit-select.svg" />
            </div>
        </div>
        <a-button @click="onConfirm" class="limit-box_btn" type="primary">{{$t('account.confirm')}}</a-button>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'

const emits = defineEmits(['select'])

const { t }  = useI18n()

const listData = computed(() => {
    return [t('contract.limit'),t('option.market')]
})

const currentIndex = ref(0)

const onSelect = (index) => {
    currentIndex.value = index
}

const onConfirm = () => {
     emits('select',currentIndex.value)
}

</script>

<style lang="scss" scoped>
.limit-box {
    padding: 40px 40px 45px;
    box-sizing: border-box;
    &_title {
        gap: 10px;
        &_icon {
            width: 18px;
            height: 18px;
        }
        &_label {
            font-size: 24px;
            font-weight: 500;
            color: #ffffff;
            line-height: 18px;
        }
    }
    &_desc {
        margin-top: 10px;
        font-size: 16px;
        font-weight: 500;
        color: #b8b8b8;
    }
    &_list {
        margin-top: 30px;
        &_item {
            cursor: pointer;
            margin-bottom: 18px;
            height: 53px;
            width: 100%;
            position: relative;
            border-radius: 12px;
            padding-left: 16px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, .2);
            font-size: 14px;
            font-weight: 500;
            color: #ffffff;
            &_label {

            }
            &_icon {
                position: absolute;
                right: 0;
                bottom: 0;
                width: 32px;
                height: 24px;
            }
        }
        &_item-active {
            border: 1px solid #d3b25b;
            background: linear-gradient(119deg, #d3b25b1a 21.42%, #f0d1801a 67.63%);
            color: #d3b25b;
        }
    }
    &_btn {
        height: 52px;
        width: 100%;
    }
}
@media only screen and (max-width: 1200px) {
    .limit-box {
        padding: 0px 24px 24px;
        box-sizing: border-box;
         &_title {
            &_label {
                font-size: 16px;
                line-height: 18px;
            }
        }
        &_desc {
            margin-top: 6px;
            font-size: 12px;
        }
        &_list {
        margin-top: 20px;
      }
    }
}
</style>